<template>
	<swiper :options="swiperOption" class="swiper">
    <!-- slides -->
	    <swiper-slide v-for="item of swiperList" :key="item.id">
	    	<img :src="item.url" alt="" @click="godetails">
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
	    <div class="swiper-button-next" slot="button-next"></div>
	    <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
	  </swiper>
</template>
<script>
 export default {
    name: 'carrousel',
    props:["swiperList"],
    data() {
      return {
        swiperOption: {
         pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay: {
            delay: 2000,
            stopOnLastSlide:false,
            disableOnInteraction:true
          }
        },
        // "swiperList":[
        // 	{
        // 		id:"01",
        // 		url:require("@/assets/img/01.jpg")
        // 	},
        // 	{
        // 		id:"02",
        // 		url:require("@/assets/img/02.jpg")
        // 	},
        // 	{
        // 		id:"03",
        // 		url:require("@/assets/img/03.jpg")
        // 	},
        // 	{
        // 		id:"04",
        // 		url:require("@/assets/img/04.jpg")
        // 	},
        // 	{
        // 		id:"05",
        // 		url:require("@/assets/img/05.jpg")
        // 	}
        // ]
      }
    },
    methods:{
      godetails(){
        this.$router.push("/details");
      }
    }
  }
</script>
</script>
<style scoped>
  .swiper{
    width: 100%;
    height: 3rem;
  }
  .swiper img{
    width: 100%;
    height: 100%;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
  }
</style>